<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR-Styling-2</title>
  <script type="text/javascript" src="https://unpkg.com/qr-code-styling"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f0f0f0;
    }
    .container {
      display: flex;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    .form-container {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }
    .qr-container {
      flex: 1;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #ddd;
    }
    h1 {
      text-align: center;
    }
    .form-group {
      margin-bottom: 10px;
    }
    label {
      display: inline-block;
      width: 200px;
    }
    input, select {
      width: 300px;
      padding: 5px;
    }
    button {
      display: block;
      width: 100%;
      padding: 10px;
      margin-top: 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    #qrcode {
      margin-top: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="form-container">
    <div class="form-group">
      <label for="width">宽度:</label>
      <input type="number" id="width" value="300">
    </div>
    <div class="form-group">
      <label for="height">高度:</label>
      <input type="number" id="height" value="300">
    </div>
    <div class="form-group">
      <label for="type">类型:</label>
      <select id="type">
        <option value="canvas">canvas</option>
        <option value="svg">svg</option>
      </select>
    </div>
    <div class="form-group">
      <label for="data">数据:</label>
      <input type="text" id="data" value="https://example.com">
    </div>
    <div class="form-group">
      <label for="margin">边距:</label>
      <input type="number" id="margin" value="10">
    </div>
    <div class="form-group">
      <label for="qrOptions-typeNumber">QR类型号:</label>
      <input type="number" id="qrOptions-typeNumber" value="0">
    </div>
    <div class="form-group">
      <label for="qrOptions-mode">QR模式:</label>
      <input type="text" id="qrOptions-mode" value="">
    </div>
    <div class="form-group">
      <label for="qrOptions-errorCorrectionLevel">错误修正级别:</label>
      <select id="qrOptions-errorCorrectionLevel">
        <option value="L">L</option>
        <option value="M">M</option>
        <option value="Q">Q</option>
        <option value="H">H</option>
      </select>
    </div>
    <div class="form-group">
      <label for="image">图片URL:</label>
      <input type="text" id="image" value="">
    </div>
    <div class="form-group">
      <label for="dotsOptions-color">点颜色:</label>
      <input type="color" id="dotsOptions-color" value="#000000">
    </div>
    <div class="form-group">
      <label for="dotsOptions-type">点类型:</label>
      <select id="dotsOptions-type">
        <option value="square">square</option>
        <option value="dots">dots</option>
        <option value="rounded">rounded</option>
        <option value="extra-rounded">extra-rounded</option>
        <option value="classy">classy</option>
        <option value="classy-rounded">classy-rounded</option>
      </select>
    </div>
    <div class="form-group">
      <label for="cornersSquareOptions-color">角落方块颜色:</label>
      <input type="color" id="cornersSquareOptions-color" value="#000000">
    </div>
    <div class="form-group">
      <label for="cornersSquareOptions-type">角落方块类型:</label>
      <select id="cornersSquareOptions-type">
        <option value="square">square</option>
        <option value="dot">dot</option>
        <option value="extra-rounded">extra-rounded</option>
      </select>
    </div>
    <div class="form-group">
      <label for="cornersDotOptions-color">角落圆点颜色:</label>
      <input type="color" id="cornersDotOptions-color" value="#000000">
    </div>
    <div class="form-group">
      <label for="cornersDotOptions-type">角落圆点类型:</label>
      <select id="cornersDotOptions-type">
        <option value="square">square</option>
        <option value="dot">dot</option>
      </select>
    </div>
    <div class="form-group">
      <label for="backgroundOptions-color">背景颜色:</label>
      <input type="color" id="backgroundOptions-color" value="#ffffff">
    </div>
    <button onclick="generateQR()">生成二维码</button>
  </div>
  <div class="qr-container">
    <div id="qrcode"></div>
  </div>
</div>
<script>
  let qrCode;
  function generateQR() {
    const options = {
      width: parseInt(document.getElementById('width').value),
      height: parseInt(document.getElementById('height').value),
      type: document.getElementById('type').value,
      data: document.getElementById('data').value,
      margin: parseInt(document.getElementById('margin').value),
      qrOptions: {
        typeNumber: parseInt(document.getElementById('qrOptions-typeNumber').value),
        mode: document.getElementById('qrOptions-mode').value,
        errorCorrectionLevel: document.getElementById('qrOptions-errorCorrectionLevel').value
      },
      imageOptions: {
        hideBackgroundDots: true,
        imageSize: 0.4,
        margin: 20,
        crossOrigin: "anonymous",
      },
      dotsOptions: {
        color: document.getElementById('dotsOptions-color').value,
        type: document.getElementById('dotsOptions-type').value
      },
      cornersSquareOptions: {
        color: document.getElementById('cornersSquareOptions-color').value,
        type: document.getElementById('cornersSquareOptions-type').value
      },
      cornersDotOptions: {
        color: document.getElementById('cornersDotOptions-color').value,
        type: document.getElementById('cornersDotOptions-type').value
      },
      backgroundOptions: {
        color: document.getElementById('backgroundOptions-color').value,
      }
    };
    const imageUrl = document.getElementById('image').value;
    if (imageUrl) {
      options.image = imageUrl;
    }
    if (qrCode) {
      qrCode.update(options);
    }
    else {
      qrCode = new QRCodeStyling(options);
      qrCode.append(document.getElementById("qrcode"));
    }
  }
  window.onload = generateQR;
</script>
</body>
</html>
